<template>
  <div class="page-container" v-if="member != null">
    <div class="grid-container">
      <div class="block-title">
        昵称: {{member.nickName}} , 手机号: {{member.phone}}, 注册时间: {{moment(member.createAt).format('YYYY-MM-DD')}}
      </div>
      <a-row type="flex" class="grid-table-tool">
        <a-col :span="10" :order="1" class="tool-action">
          <a-input-search placeholder="订单号" v-model="params.key" @search="onSearch" style="width:300px;">
            <a-button icon="search" type="primary" slot="enterButton">筛选</a-button>
          </a-input-search>
        </a-col>
        <a-col :span="14" :order="2" class="tool-pagination">

        </a-col>
      </a-row>
      <a-row type="flex" class="grid-table-tool">
        <a-col :span="10" :order="1" class="tool-action">
          <a-button type="primary" @click="onBackBucketBatch">退桶</a-button>
        </a-col>
      </a-row>
      <a-table bordered :columns="columns" :dataSource="dataList" :rowSelection="{onChange:onSelectChange}" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle">
        <template slot="orderNo" slot-scope="text,record">
          {{record.orderNo}}
        </template>
        <template slot="num" slot-scope="text,record">1</template>
        <template slot="amount" slot-scope="text,record">
          {{fmMoney(record.amount,2,true)}}
        </template>
        <template slot="createAt" slot-scope="text,record">
          {{moment(record.createAt).format('YYYY-MM-DD HH:mm:ss')}}
        </template>
        <template slot="operation" slot-scope="text,record" >
          <a @click="onBackBucket([record])">退桶</a>
        </template>
      </a-table>
      <a-row type="flex" class="grid-table-tool">
        <a-col :span="12" :order="1" class="tool-action">
          <a-button type="primary" @click="onBackBucketBatch">退桶</a-button>
        </a-col>
        <a-col :span="12" :order="2" class="tool-pagination">
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
  import {fmMoney} from "@/utils/index";
  import moment from 'moment/moment'

  const columns = [
    { title: '订单号', dataIndex: 'orderNo', key: 'orderNo',align:'right',width:200,scopedSlots: { customRender: 'orderNo' }},
    { title: '桶数', dataIndex: 'num', key: 'num',align:'right' ,width:200,scopedSlots: { customRender: 'num' }},
    { title: '押金金额', dataIndex: 'amount', key: 'price' ,align:'right',width:200,scopedSlots: { customRender: 'amount' }},
    { title: '下单时间', dataIndex: 'createAt', key: 'createAt',align:'center' ,width:200,scopedSlots: { customRender: 'createAt' }},
    {title:'操作',align:'center',scopedSlots: { customRender: 'operation' },width:100}];

  export default {
    props:{
      member:Object
    },
    data() {
        return {
          columns,
          checked:[],
          dataList: [],
          params: {
            key: ''
          },
          loading: false
        }
    },
    methods:{
        moment,
        fmMoney,
       onSearch(){
          console.log("key==>",this.params.key)
          if(this.member != null){
            let source = this.member.deposit || []
            if(this.baseUtil.isBlank(this.params.key)){
              this.dataList = source
            } else {
              this.dataList = source.filter(m => m.orderNo.indexOf(this.params.key)>-1)
            }
          }
        },
      onSelectChange(selectedRowKeys, selectedRows) {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        this.checked = selectedRows;
      },
      onBackBucketBatch(){
        if(this.checked.length == 0) {
          this.$message.warning("请至少选择一条记录")
          return false
        }
        this.onBackBucket(this.checked)
      },
      onBackBucket(records){
        const that = this;
        this.$confirm({
          title: '此操作前请确保桶已回收,确认退返所选记录押金吗?',
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            that.$emit('refund',that.member,records)
          }, onCancel() {},
        })
      }
    },
    mounted(){
      if(this.member != null) {
        this.dataList = this.member.deposit || [];
      }
    },
  }
</script>

